<!-- 带我办-我发起 -->
<template>
  <div class="filter_section">
    <Filterelement
      WhichPage="我发起"
      :Params="Params"
      @searchBtn="searchBtn"
      @reset="reset"
      :userList="[]"
    />

    <div
      style="
        margin: 10px 20px 20px;
        padding: 16px;
        background-color: #fff;
        position: relative;
      "
    >
      <div class="tableHeader">
        <div class="line"></div>
        <div class="tableHeaderText">我发起列表</div>
      </div>
      <el-table
        v-loading="loading"
        :data="userList"
        @selection-change="handleSelectionChange"
        :height="chicun"
        :header-row-style="{ background: '#0E74C4', color: '#000' }"
        :header-cell-style="{ color: '#fff' }"
      >
        <el-table-column
          width="60"
          type="index"
          label="序号"
          align="center"
          key="userId"
          prop="userId"
        />
        <el-table-column
          label="标题"
          align="center"
          key="title"
          prop="title"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="发布时间"
          align="center"
          prop="publishTime"
          key="publishTime"
          width="160"
        >
        </el-table-column>
        <el-table-column
          label="申请人"
          align="center"
          key="applyUserName"
          prop="applyUserName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="审核状态"
          align="center"
          key="statusName"
          prop="statusName"
          width="120"
        >
          <template #default="scope">
            <span
              :class="[
                scope.row.status === 1 ||
                scope.row.status === 2 ||
                scope.row.status === 3 ||
                scope.row.status === 4
                  ? '#0E74C4'
                  : 'red',
              ]"
              >{{
                scope.row.status === 1
                  ? "待提交"
                  : scope.row.status === 2
                  ? "待审核"
                  : scope.row.status === 3
                  ? "审核中"
                  : scope.row.status === 4
                  ? "通过"
                  : scope.row.status === 5
                  ? "不通过"
                  : "-"
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="流程节点"
          align="center"
          key="status"
          width="120"
        >
          <template #default="scope">
            <div class="linkBtn" @click="handleFowlPath(scope.row)">
              查看流程节点
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tooltip content="重新核验" placement="top">
              <el-button
                v-if="scope.row.status === 5"
                color="#3175BE"
                @click="handleUpdate(scope.row)"
                >重新核验</el-button
              >
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="data.Params.pageNum"
        v-model:limit="data.Params.pageSize"
        @pagination="getList1"
        style="height: 50px"
      />
    </div>
    <!-- 流程弹窗 -->
    <FlowPath
      :dialogVisible="dialogVisible"
      @dialogClose="dialogClose"
      :title="dialogTitle"
      :businessId="businessId"
    ></FlowPath>
  </div>
</template>

<script setup>
import Filterelement from "../../zujian/filterelement";
import { watch, ref } from "vue";
import dayjs from "dayjs";
import { TodoListPage } from "@/api/todolistiinitiate/index";
import router from "@/router";
const loading = ref(false);
// 监测窗口尺寸变化
var innerHeight = "300";
const chicun = ref();
window.addEventListener("resize", function () {
  // 获取并打印窗口内部高度
  innerHeight = window.innerHeight - 400 + "px";
  chicun.value = innerHeight;
});

// 页面加载时获取初始窗口内部高度
chicun.value = window.innerHeight - 400;
// 流程弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("");
const businessId = ref(null);

/** 流程 */
/** 流程 */
const handleFowlPath = (row) => {
  dialogVisible.value = true;
  dialogTitle.value = "其他成本会签流程节点";
  businessId.value = row.id;
};
const dialogClose = () => {
  dialogVisible.value = false;
  businessId.value = null;
};
const userList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined,
  },
  Params: {
    business: "", //	业务
    job: "", //岗位
    leccAccount: "", //lecc账号
    socialSecurityId: "", //	配置管理-社保数据ID(汇总行的ID)
    status: "", //		审核状态(1:待提交，2：待审核，3：审核中，4：通过，5：不通过)
    team: "", //			班组
    userName: "", //			姓名
    title: "", //标题
    publishTime: "", //发布时间
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, Params } = toRefs(data);
function formatDate(dateString) {
  // 创建一个日期对象
  const date = new Date(dateString);
  // 获取年份、月份（月份从0开始，需要加1）、日
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份需要加1，且保证两位数
  // const day = date.getDate().toString().padStart(2, '0'); // 如果需要日，可以加上这一行
  // 拼接成 "yyyy-mm" 格式
  const formattedDate = `${year}-${month}`;
  return formattedDate;
}
//搜索按钮
const searchBtn = (TimeOfExpense) => {
  if (data.Params.publishTime) {
    data.Params.publishTime = formatDate(data.Params.publishTime);
  }
  getList();
};
//重置按钮
const reset = (TimeOfExpense) => {
  if (!TimeOfExpense.value[0]) {
    data.Params.publishTime = "";
  }
  data.Params = {
    business: "", //	业务
    job: "", //岗位
    leccAccount: "", //lecc账号
    socialSecurityId: "", //	配置管理-社保数据ID(汇总行的ID)
    status: "", //		审核状态(1:待提交，2：待审核，3：审核中，4：通过，5：不通过)
    team: "", //			班组
    userName: "", //			姓名
    Title: "", //标题
    publishTime: "", //发布时间
    pageNum: 1,
    pageSize: 10,
  };
  getList();
  console.log("重置");
};
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 查询用户列表 */
function getList() {
  loading.value = true;
  TodoListPage(data.Params).then((res) => {
    data.Params.pageNum = res.data.current;
    data.Params.pageSize = res.data.size;
    total.value = res.data.total;
    userList.value = res.data.items;
    loading.value = false;
  });
}
//分页
function getList1(scope) {
  loading.value = true;
  if (scope) {
    data.Params.pageNum = scope.page;
    data.Params.pageSize = scope.limit;
  } else {
    data.Params.pageNum = 1;
    data.Params.pageSize = 10;
  }
  TodoListPage(data.Params).then((res) => {
    total.value = res.data.total;
    userList.value = res.data.items;
    loading.value = false;
  });
}

// 重新核验
const handleUpdate = (row) => {
  if (row.tableId === "其他费用管理模块") {
    router.push({
      path: "/nest/otherCosts",
      query: {
        qw: "1",
      },
    });
  } else if (row.tableId === "薪酬绩效管理模块") {
    router.push({
      path: "/nest/pay",
      query: {
        qw: "1",
      },
    });
  } else if (row.tableId === "社保公积金管理模块") {
    router.push({
      path: "/nest/socialSecurity",
      query: {
        qw: "1",
      },
    });
  }
};
getList();
</script>

<style lang="scss" scoped>
.filter_section {
  width: 100%;
}
.linkBtn {
  width: 100px;
  cursor: pointer;
  color: #3175be;
  text-decoration: underline;
}
.tableHeader {
  width: 100%;
  font-size: 20px;
  height: 35px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  .line {
    width: 4px;
    height: 18px;
    background-color: #2e70b6;
    margin-right: 4px;
  }
  .tableHeaderText {
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
